<template>
    <div class="comment">
        <div class="yizhenggehuifukuan">
            <div v-for="(item,index) in commentsList" :key="index">
                <ComponentItem :comment="item"/>
<!--                <div class="huifuanniu">-->
<!--                    <el-link  target="_blank"   @click="updateStatus(item.topic.id)" style="float: right">-->
<!--                        <div style="margin-right: 10px ">-->
<!--                            我也说一句-->
<!--                        </div>-->
<!--                    </el-link>-->
<!--                </div>-->
                <div v-if="open">
                    <div class="huifukuan">
                        <div  class="huifukuan1">
                        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                            <el-form-item >
                                <el-input type="textarea" v-model="form.content" :min-height="50"/>
                            </el-form-item>
                        </el-form>
                        </div>
                            <el-button type="primary" size="mini" style="float: right; margin-top: 2px" @click="submitForm">发表</el-button>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </div>
</template>

<script>
    import ComponentItem from "./CommentItem.vue";

    export default {
        name: "CommentList",
        inject: ['reload'],
        components: {
            ComponentItem,
        },
        data() {
            return {
                commentsList:[],
                open: false,
                content: null,
                // 表单参数
                form:{
                    fatherId:'',
                    content:''
                },
                // 表单校验
                rules: {
                },
            };
        },

        props: {
            comments: {
                type: Array,
                props: () => [],
            },
        },
        mounted() {
                this.commentsList = this.comments
        },
        methods:{
            updateStatus(topicId){
                console.log(topicId);
                this.open = !this.open;
                this.form.fatherId = topicId;
            },
            /** 发表按钮 */
            submitForm() {
                console.log(this.form);
                if (this.form.fatherId != null) {
                    const token = sessionStorage.getItem("token");
                    this.$http.defaults.headers.common['Authorization'] = token;
                    console.log(this.form)
                    this.$http.post('topic', this.form).then(response => {
                        if (response.data.code === 200) {
                            this.$message({showClose: true, message: "发表成功", type: "success"})
                            this.open = false;
                            this.reload();
                        }
                    });
                }
            },
        }
    };
</script>

<style scoped lang="scss">
    .comment {
        margin: 20px;
    }
    .head {
        color: #aca9a9;
        span {
            cursor: pointer;
        }
    }
    .huifuanniu{
        width: 100%;
        height: 25px;
    }
    .huifukuan{
        width: 100%;
        height: 90px;
    }
    .yizhenggehuifukuan{
        width: 100%;
        background: #FFFACD;
        border: #EEE8AA solid 1px;
    }
    .clear{
        clear: bottom;
    }
    .huifukuan1{
        width: 100%;
        height: 55px;
    }
</style>
